<template>
    <el-container class="layout-container">
        <!-- 主页面区域 -->
        <el-container>
            <el-main class="main">
                <div class="crud-container">
                    <!-- 搜索区域 -->
                    <div class="search-area">
                        <el-form :inline="true" :model="searchForm" class="search-form">
                            <el-form-item label="优惠卷类型" class="el-formitem">
                                <el-select v-model="searchForm.couponType" placeholder="请选择优惠卷类型" clearable>
                                    <el-option label="满减券" value="0" />
                                    <el-option label="折扣券" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="优惠卷名字" class="el-formitem">
                                <el-input v-model="searchForm.couponName" placeholder="请输入优惠卷名字" />
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                                    <el-option label="正常" value="0" />
                                    <el-option label="停用" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleSearch">
                                    <el-icon>
                                        <Search />
                                    </el-icon>搜索
                                </el-button>
                                <el-button @click="resetSearch">
                                    <el-icon>
                                        <Refresh />
                                    </el-icon>重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 操作按钮区域 -->
                    <div class="operation-area">
                        <el-button type="primary" @click="handleAdd">
                            <el-icon>
                                <Plus />
                            </el-icon>新增
                        </el-button>
                        <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
                            <el-icon>
                                <Delete />
                            </el-icon>批量删除
                        </el-button>
                    </div>

                    <!-- 表格区域 -->
                    <div class="table-area">
                        <el-table v-loading="loading" :data="filteredTableData" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="templateId" label="ID" width="80" />
                             <el-table-column prop="couponName" label="优惠卷名字" />
                            <el-table-column prop="couponType" label="优惠类型">
                                <template #default="{ row }">
                                    <el-tag :type="row.couponType === 0?'warning' : 'primary'">
                                        {{ row.couponType === 0? '满减券' : '折扣券' }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="totalCount" label="发放总量" />
                            <el-table-column prop="remainingCount" label="剩余数量" />
                            <el-table-column prop="validDays" label="有效天数" />
                            <el-table-column prop="createTime" label="创建时间" width="180" />
                            <el-table-column prop="status" label="状态" width="100">
                                <template #default="{ row }">
                                    <el-tag :type="row.status === 0 ? 'success' : 'danger'">
                                        {{ row.status === 0 ? '正常' : '停用' }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template #default="{ row }">
                                    <el-button type="primary" link @click="handleEdit(row)">
                                        <el-icon>
                                            <Edit />
                                        </el-icon>编辑
                                    </el-button>
                                    <el-button type="primary" link @click="handleView(row)">
                                        <el-icon>
                                            <View />
                                        </el-icon>查看
                                    </el-button>
                                    <el-button type="danger" link @click="handleDelete(row)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 点击所跳出查看获取当前列表信息 -->
                    <el-dialog v-model="showViewDialog" title="查看优惠券信息" width="500px" :destroy-on-close="true">
                        <el-form :model="viewForm" label-width="100px" :rules="rules" ref="formRef">
                           <el-form-item label="优惠卷名字" prop="couponName">
                                <el-input v-model="viewForm.couponName" readonly />
                            </el-form-item>
                            <el-form-item label="优惠卷类型" prop="couponType">
                                <el-input v-model="viewForm.couponType" 
                                          :value="viewForm.couponType === '0' || viewForm.couponType === 0 ? '满减券' : viewForm.couponType === '1' || viewForm.couponType === 1 ? '折扣券' : ''" 
                                          readonly />
                            </el-form-item>
                             <!-- 如果优惠券类型选满减券 -->
                            <el-form-item v-if="Number(viewForm.couponType) === 0" label="满减最低消费" prop="minAmount">
                                <!-- Bug 修复：将 addForm 改为 viewForm -->
                                <el-input v-model="viewForm.minAmount" readonly />
                            </el-form-item>
                            <el-form-item v-if="Number(viewForm.couponType) === 0" label="满减抵扣金额" prop="deductAmount">
                                <el-input v-model="viewForm.deductAmount" readonly />
                            </el-form-item>
                            <!-- 如果优惠券类型选折扣券 -->
                            <el-form-item v-if="Number(viewForm.couponType) === 1" label="折扣比例" prop="discountRate">
                                <el-input v-model="viewForm.discountRate" readonly />
                            </el-form-item>
                            
                            <el-form-item label="发放总量" prop="totalCount">
                                <el-input v-model="viewForm.totalCount" readonly />
                            </el-form-item>
                            <el-form-item label="剩余数量" prop="remainingCount">
                                <el-input v-model="viewForm.remainingCount" readonly />
                            </el-form-item>
                            <el-form-item label="有效天数" prop="validDays">
                                <el-input v-model="viewForm.validDays" readonly />
                            </el-form-item>
                            <!-- 适用车型列表 -->
                            <el-form-item label="适用车型" prop="applicableIds">
                                <el-checkbox-group v-model="viewForm.applicableIds" >
                                    <el-checkbox label="专车">专车</el-checkbox>
                                    <el-checkbox label="快车">快车</el-checkbox>
                                    <el-checkbox label="特惠快车">特惠快车</el-checkbox>
                                    <el-checkbox label="出租车">出租车</el-checkbox>
                                    
                                    
                                </el-checkbox-group>
                            </el-form-item>
                            <!-- 优惠描述 -->
                            <el-form-item label="优惠描述" prop="conditionDesc">
                                <el-input v-model="viewForm.conditionDesc" readonly />
                            </el-form-item>
                            <!-- 适用范围0-全平台,1-指定车型 -->
                            <!-- <el-form-item label="适用范围" prop="applicableRange">
                                <el-radio-group v-model="viewForm.applicableRange">
                                    <el-radio label="0">全平台</el-radio>
                                    <el-radio label="1">指定车型</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                        </el-form>
                        <template #footer>
                            <el-button @click="showViewDialog = false">关闭</el-button>
                        </template>
                    </el-dialog>

                    <!-- 修改当前列表数据 -->
                    <el-dialog v-model="showEditDialog" title="修改优惠券信息" width="500px" :destroy-on-close="true">
                        <el-form :model="editForm" label-width="100px" :rules="rules" ref="formRef">
                           <el-form-item label="优惠卷名字" prop="couponName">
                                <el-input v-model="editForm.couponName" placeholder="请输入优惠卷名字" />
                            </el-form-item>
                            <el-form-item label="优惠卷类型" prop="couponType">
                                <el-input v-model="editForm.couponType" 
                                          :value="editForm.couponType === '0' || editForm.couponType === 0 ? '满减券' : editForm.couponType === '1' || editForm.couponType === 1 ? '折扣券' : ''" 
                                          readonly />
                            </el-form-item>
                             <!-- 如果优惠券类型选满减券 -->
                            <el-form-item v-if="Number(editForm.couponType) === 0" label="满减最低消费" prop="minAmount">
                                <!-- Bug 修复：将 addForm 改为 viewForm -->
                                <el-input v-model="editForm.minAmount" placeholder="请输入满减最低消费" />
                            </el-form-item>
                            <el-form-item v-if="Number(editForm.couponType) === 0" label="满减抵扣金额" prop="deductAmount">
                                <el-input v-model="editForm.deductAmount" placeholder="请输入满减抵扣金额" />
                            </el-form-item>
                            <!-- 如果优惠券类型选折扣券 -->
                            <el-form-item v-if="Number(editForm.couponType) === 1" label="折扣比例" prop="discountRate">
                                <el-input v-model="editForm.discountRate" placeholder="请输入折扣比例" />
                            </el-form-item>
                            
                            <el-form-item label="发放总量" prop="totalCount">
                                <el-input v-model="editForm.totalCount" placeholder="请输入发放总数" />
                            </el-form-item>
                            <el-form-item label="剩余数量" prop="remainingCount">
                                <el-input v-model="editForm.remainingCount" placeholder="请输入剩余数量" />
                            </el-form-item>
                            <el-form-item label="有效天数" prop="validDays">
                                <el-input v-model="editForm.validDays" placeholder="请输入有效天数" />
                            </el-form-item>
                            <!-- 适用车型列表 -->
                            <el-form-item label="适用车型" prop="applicableIds">
                                <el-checkbox-group v-model="editForm.applicableIds" >
                                    <el-checkbox label="专车">专车</el-checkbox>
                                    <el-checkbox label="快车">快车</el-checkbox>
                                    <el-checkbox label="特惠快车">特惠快车</el-checkbox>
                                    <el-checkbox label="出租车">出租车</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <!-- 优惠描述 -->
                            <el-form-item label="优惠描述" prop="conditionDesc">
                                <el-input v-model="editForm.conditionDesc" placeholder="请输入优惠描述" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <el-button type="primary" @click="handleSave">保存</el-button>
                            <el-button @click="showEditDialog = false">关闭</el-button>
                        </template>
                    </el-dialog>
                     

                    <!-- 分页区域 -->
                    <div class="pagination-area">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]" :total="total"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>

                    <!-- 新增表单 -->
                    <el-dialog v-model="showAddDialog" title="新增优惠券" width="500px" :destroy-on-close="true">
                        <el-form label-width="100px" :model="addForm" :rules="rules" ref="formRef">
                            <el-form-item label="优惠卷名字" prop="couponName">
                                <el-input v-model="addForm.couponName" placeholder="请输入优惠卷名字" />
                            </el-form-item>
                            <el-form-item label="优惠卷类型" prop="couponType">
                                <el-select v-model="addForm.couponType" placeholder="请选择优惠卷类型" clearable>
                                    <el-option label="满减券" value="0" />
                                    <el-option label="折扣券" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="发放总量" prop="totalCount">
                                <el-input v-model="addForm.totalCount" placeholder="请输入发放总量" />
                            </el-form-item>
                            <el-form-item label="有效天数" prop="validDays">
                                <el-input v-model="addForm.validDays" placeholder="请输入有效天数" />
                            </el-form-item>
                            <!-- 如果优惠券类型选满减券 -->
                            <el-form-item v-if="addForm.couponType === '0'" label="满减最低消费" prop="minAmount">
                                <el-input v-model="addForm.minAmount" placeholder="满减最低消费" />
                            </el-form-item>
                            <el-form-item v-if="addForm.couponType === '0'" label="满减抵扣金额(" prop="deductAmount">
                                <el-input v-model="addForm.deductAmount" placeholder="满减抵扣金额(" />
                            </el-form-item>
                            <!-- 如果优惠券类型选折扣券 -->
                            <el-form-item v-if="addForm.couponType === '1'" label="折扣比例" prop="discountRate">
                                <el-input v-model="addForm.discountRate" placeholder="请输入折扣率/1-9折" />
                            </el-form-item>
                            <!-- 适用车型列表 -->
                            <el-form-item label="适用车型" prop="applicableIds">
                                <el-checkbox-group v-model="addForm.applicableIds">
                                    <el-checkbox label="专车">专车</el-checkbox>
                                    <el-checkbox label="快车">快车</el-checkbox>
                                    <el-checkbox label="特惠快车">特惠快车</el-checkbox>
                                    <el-checkbox label="出租车">出租车</el-checkbox>
                                    
                                    
                                </el-checkbox-group>
                            </el-form-item>
                            <!-- 优惠描述 -->
                            <el-form-item label="优惠描述" prop="conditionDesc">
                                <el-input v-model="addForm.conditionDesc" placeholder="请输入优惠描述" />
                            </el-form-item>
                            <!-- 适用范围0-全平台,1-指定车型 -->
                            <!-- <el-form-item label="适用范围" prop="applicableRange">
                                <el-radio-group v-model="addForm.applicableRange">
                                    <el-radio label="0">全平台</el-radio>
                                    <el-radio label="1">指定车型</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                             
                        </el-form>
                        <template #footer>
                            <el-button @click="showAddDialog = false">取消</el-button>
                            <el-button type="primary" @click="handleAddSubmit">提交</el-button>
                        </template>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { Fold, Expand, ArrowDown, Search, Refresh, Plus, Delete, Edit, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, messageConfig } from 'element-plus'
import request from '@/utils/request'

const router = useRouter()
const isCollapse = ref(false)
const menuList = ref([])
const activeMenu = ref('')
const showAddDialog = ref(false)

const formRef = ref(null)
// 查看表单数据
const viewForm = ref({})
// 修改表单数据
const editForm = ref({})
const showEditDialog = ref(false)

// 记录初始发放总量
const initialTotalCount = ref(0)

// 记录初始剩余数量
const initialRemainingCount = ref(0)


// 新增表单数据
const addForm = ref({
    templateId: '',
    couponName: '',
    couponType: '',
    totalCount: '',
    validDays: '',
    minAmount: '',
    deductAmount: '',
    discountRate: '',
    applicableIds: [],
    conditionDesc: '',
    // applicableRange: '',
    status: null,
})

const rules = {
    templateId: [
        { required: true, message: '请输入ID', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: 'ID必须为正整数', trigger: 'blur' }
    ],
    couponName: [
        { required: true, message: '请输入优惠卷名字', trigger: 'blur' } 
    ],
    couponType: [
        { required: true, message: '请选择优惠类型', trigger: 'change' }
    ],
    totalCount: [
        { required: true, message: '请输入发放总量', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '发放总量必须为正整数', trigger: 'blur' }
    ],
    validDays: [
        { required: true, message: '请输入有效天数', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '有效天数必须为正整数', trigger: 'blur' }
    ],
    minAmount: [
        { required: true, message: '请输入满减最低消费', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '满减最低消费必须为正整数', trigger: 'blur' } 
    ],
    deductAmount: [
        { required: true, message: '请输入满减抵扣金额', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '满减抵扣金额必须为正整数', trigger: 'blur' } 
    ],
    discountRate: [
        { required: true, message: '请输入折扣比例', trigger: 'blur' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '折扣比例必须为正整数或两位小数', trigger: 'blur' }
    ],
    applicableIds: [
        { required: true, message: '请选择适用车型', trigger: 'change' }
    ],
    conditionDesc: [
        { required: true, message: '请输入优惠描述', trigger: 'blur' }
    ],
    // applicableRange: [
    //     { required: true, message: '请选择适用范围', trigger: 'change' }
    // ]
}

// 页面加载时获取菜单
onMounted(() => {
    getMenuList()
    adminList()
})

// 动态获取图标组件
const getIconComponent = (iconName) => {
    return ElementPlusIconsVue[iconName] || ElementPlusIconsVue['Menu']
}

// 获取菜单数据
const getMenuList = async () => {
    try {
        const userStr = sessionStorage.getItem('user')
        // if (!userStr) {
        //     ElMessage.error('用户未登录')
        //     router.push('/login')
        //     return
        // }

        const user = JSON.parse(userStr)
        console.log(user,"user");
        const username = user.username


        request.get(`/menu/list?username=${encodeURIComponent(username)}`)
            .then(res => {
                // console.log(res);
                menuList.value = res.data.menu
                activeMenu.value = menuList.value[0].path
            }).catch(err => {
                console.log(err);

            })
    } catch (error) {
        ElMessage.error(error.message || '获取菜单失败')
        console.error('获取菜单失败:', error)
    }
}

// 点击菜单跳转
const handleMenuClick = (item) => {
    if (item.path) {
        router.push(item.path)
        activeMenu.value = item.path
    }
}

// 折叠菜单
const toggleSidebar = () => {
    isCollapse.value = !isCollapse.value
}

// 搜索表单数据
const searchForm = ref({
    couponType: '',
    couponName: '',
    status: ''
})

// 表格数据
const loading = ref(false)
const tableData = ref([])
const filteredTableData = ref([]) // 存储过滤后的数据
const selectedRows = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 查看表单数据
const showViewDialog = ref(false)

// 前端搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm.value);
    console.log('原始数据:', tableData.value);
    filteredTableData.value = tableData.value.filter(item => {
        const matchesCouponType = !searchForm.value.couponType || String(item.couponType) === String(searchForm.value.couponType);
        const matchesCouponName = !searchForm.value.couponName || item.couponName?.includes(searchForm.value.couponName);
        const matchesStatus = !searchForm.value.status || String(item.status) === String(searchForm.value.status);

        return matchesCouponType && matchesCouponName && matchesStatus;
    });
    console.log('过滤后数据:', filteredTableData.value);
    currentPage.value = 1;
    total.value = filteredTableData.value.length;
}

// 重置搜索
const resetSearch = () => {
    searchForm.value = {
        couponType: '',
        couponName: '',
        state: ''
    };
    filteredTableData.value = tableData.value;
    currentPage.value = 1;
    total.value = filteredTableData.value.length;
};

// 表格选择
const handleSelectionChange = (rows) => {
    selectedRows.value = rows
}

// 打开弹窗前重置表单
const handleAdd = () => {
    addForm.value = {
        templateId: '',
        couponName: '',
        couponType: '', 
        totalCount: '',
        validDays: '',
        minAmount: '',
        deductAmount: '',
        discountRate: '',
        applicableIds: [],
        conditionDesc: '',
        // applicableRange: '',
    }
    showAddDialog.value = true
}

// 提交新增
const handleAddSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            ElMessage.success('表单验证通过，提交成功！')
            console.log('提交的数据：', addForm.value)
            // 执行提交逻辑，例如调用接口
            request.post('/coupon/addCoupon', addForm.value)
              .then((res) => {
                    console.log(res);
                    ElMessage.success('新增成功！')
                    adminList()
                    showAddDialog.value = false
                }).catch((err) => {
                    console.log(err);
                    ElMessage.error('新增失败！')
                })
            showAddDialog.value = false
        } else {
            ElMessage.error('请填写完整信息！')
        }
    })
}
// 提交修改
const handleSave = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            ElMessage.success('表单验证通过，提交成功！')
            console.log('提交的数据：', editForm.value) 
            
            request.put('/coupon/updateCoupon', editForm.value)
             .then((res) => {
                    console.log(res);
                    ElMessage.success('修改成功！')
                    adminList()
                    showEditDialog.value = false
                }).catch((err) => {
                    console.log(err);
                    ElMessage.error('修改失败！')       
                })
        }
        else {
            ElMessage.error('请填写完整信息！') 
        }
    })
}

// 编辑
const handleEdit = (row) => {
    // 这里添加编辑逻辑
    showEditDialog.value = true
    editForm.value = {...row }
    // 记录初始发放总量
    initialTotalCount.value = Number(row.totalCount)
    // 记录初始剩余数量
    initialRemainingCount.value = Number(row.remainingCount)
}

// 监听发放总量变化
 watch(() => editForm.value.totalCount, (newTotal) => {
    
    if (editForm.value.remainingCount !== undefined && initialTotalCount.value !== undefined && newTotal !== undefined ) {
        const newTotalNum = Number(newTotal)
        const diff = newTotalNum - initialTotalCount.value
        // 检查剩余数量是否超过新的发放总量
        if (editForm.value.remainingCount > newTotalNum) {
            editForm.value.remainingCount = newTotalNum
            ElMessage.warning('剩余数量不能大于发放总量！')
            // 还原发放总量
            editForm.value.totalCount = initialTotalCount.value
            //还原剩余数量
            editForm.value.remainingCount = initialRemainingCount.value

        }else{
             // 更新剩余数量
            editForm.value.remainingCount = Number(editForm.value.remainingCount) + diff
            // 更新初始发放总量
            initialTotalCount.value = newTotalNum
            // 更新初始剩余数量
            initialRemainingCount.value = Number(editForm.value.remainingCount)
        }
    }
    


}, { deep: true })

// 查看
const handleView = (row) => {
    // 这里添加查看逻辑
    showViewDialog.value = true
    viewForm.value = { ...row }
    console.log(viewForm.value,"viewForm");
}

// 删除
const handleDelete = (row) => {
    // 这里添加删除逻辑
    console.log(row.templateId);
    ElMessageBox.confirm(
        '是否删除该条数据？',
        '提示', 
    )
      .then(() => {
            request.delete(`/coupon/deleteCoupon?templateId=${row.templateId}`)
             .then((res) => {
                    console.log(res);
                    ElMessage.success('删除成功！')
                    adminList()
                }).catch((err) => {
                    console.log(err);
                    ElMessage.error('删除失败！')
                })
        })
      .catch(() => {
            ElMessage({
                type:'success', 
                message: 'Delete canceled',
            })
      })
}

// 批量删除
const handleBatchDelete = () => {
    // 这里添加批量删除逻辑
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要删除的行！')
        return 
    }
    const ids = selectedRows.value.map(row => row.templateId).join(',')
    console.log(ids);
    ElMessageBox.confirm(
        '是否批量删除选中的行？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
      .then(() => {
            request.delete(`/coupon/deleteCoupons?templateIds=${ids}`) 
            .then((res) => {
                    console.log(res);
                    ElMessage.success('批量删除成功！')
                    adminList() 
            })
      })
     .catch(() => {
            ElMessage({
                type:'success',
                message: 'Delete canceled',
            })
      }) 
}

// 分页大小改变
const handleSizeChange = (val) => {
    pageSize.value = val
}

// 页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val
}

//获取管理员列表
const adminList = () => {
    request.get('/coupon/selectCouponList', {
        page: currentPage.value,
        size: pageSize.value
    })
        .then((res) => {
            console.log(res);
            
            total.value = res.data.count;
            tableData.value = res.data.selectCouponList;
             filteredTableData.value = tableData.value; // 初始化 filteredTableData

        }).catch((err) => {
            console.error('获取失败：', err)
        })
}

const open = () => {
    ElMessageBox.confirm(
        '是否退出登录？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功！',
            });
            router.push('/login');
            sessionStorage.clear();
        })
        .catch(() => {
            // ElMessage({
            //     type: 'success',
            //     message: 'Delete canceled',
            // })
        })
}

// 获取角色选项列表
const fetchRoles = () => {
    request.get('/role/getrole')
        .then((res) => {
            // console.log(res);
            roleOptions.value = res.data.rolePermissionList;
        }).catch((err) => {
            console.log(err);

        })
}

</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.layout-container {
    height: 100vh;
}

.aside {
    background-color: #304156;
    transition: width 0.3s ease;
    overflow: hidden;
}

.el-menu-vertical {
    border-right: none;
    height: 100%;
}

.header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.system-title {
    font-size: 18px;
    color: #333;
    margin-left: 10px;
}

.header-right {
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #409EFF;
}

.main {
    background-color: #f5f7fa;
    padding: 20px;
    min-height: calc(100vh - 60px);
}

.crud-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-area {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.operation-area {
    margin-bottom: 20px;
}

.table-area {
    margin-bottom: 20px;
}

.pagination-area {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.pagination-area span {
    padding-left: 10px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-button [class*="el-icon"]+span {
    margin-left: 5px;
}

.search-form .el-form-item {
    min-width: 190px;
}

.el-form-item span {
    /* padding-left: 10px; */
}

.el-formitem {
    width: 225px;
}
</style>
